<template>
  <div id="cont" class="el-row--flex is-justify-center is-align-center">
    <!-- <i @click="screenfull">sadas</i> -->
    <kityminder
      v-if="selectedFile.suffix == 'json'"
      ref="kityminder"
      :selected-file="selectedFile"
      :is-update="authority.isUpdate"
    />

      <tinymce
        v-if="selectedFile.suffix == 'html'"
        ref="tinymce"
        :selected-file="selectedFile"
        :toolbar="toolbar"
        @onClick="onClick"
        :is-update="authority.isUpdate"
        :readonly="readonly"
      />


    <img
      v-if="
        selectedFile.suffix.includes('png') ||
          selectedFile.suffix.includes('jpg')
      "
      :src="ServerUrl + '/file/download?id=' + selectedFile.id"
    >

    <div class="pdf-box" v-if="selectedFile.suffix == 'pdf' || selectedFile.suffix == 'docx'">
      <div class="edit" @click="onEdit">
        <img src="@/assets/home/edit2.png" alt="">
      </div>
      <iframe
        id="pdf"
        :src="ServerUrl + '/file/export/pdf?fileid=' + selectedFile.id + '#toolbar=0'"
        frameborder="0"
        width="100%"
        height="100%"
      />
    </div>

    <img v-if="selectedFile.suffix == ''" src="../../assets/folder.png" alt>

    <!--图片放大-->
    <div class="dialog-show-img  " v-if="isShowBigImg" @click="isShowBigImg=false">
      <div class="img-layout"
           @click.stop=""
           @wheel.prevent="onWheelImage($event)">
        <img :src="imgUrl" class="img  animate__animated  animate__zoomIn animate__faster ">
      </div>
    </div>
  </div>
</template>

<script>
  import kityminder from './kityminder'
  import tinymce from '@/components/tinymce'
  import screenfull from 'screenfull'

  export default {
    name: 'Home',
    components: { tinymce, kityminder },
    props: {
      // selectedFile: {
      //   type: Object,
      //   // 对象或数组默认值必须从一个工厂函数获取
      //   default: function() {
      //     return { suffix: '' }
      //   }
      // }
    },
    data() {
      return {
        isFullscreen: false,
        readonly: true,
        toolbar: 'fullscreen preview',
        imgUrl: '',
        isShowBigImg: false
      }
    },
    computed: {
      selectedFile() {
        console.log(this.$store.state.index.selectedFile)
        return this.$store.state.index.selectedFile
      },
      authority() {
        return this.$store.state.index.authority
      }
    },
    watch: {
      selectedFile(newVal, oldVal) {
        const realname = JSON.parse(sessionStorage.userInfo).realName
        const editor = newVal.editor
        if (newVal.suffix.includes('html')) {
          console.log(editor)
          console.log(realname)
          if (editor === realname) {
            this.$store.commit('index/set_authority', {
              isLook: 1,
              isUpdate: 1,
              isDelete: 0
            })
            this.readonly = false
          } else {
            this.readonly = true
            if (editor) {
              this.$message(
                `文档正由${editor}编辑，请联系他释放权限后，您才能编辑`
              )
            }
            this.$store.commit('index/set_authority', {
              isLook: 1,
              isUpdate: 0,
              isDelete: 0
            })
          }
        }
      },
      authority(newVal, oldVal) {
        if (this.authority.isUpdate === 1) {
          this.toolbar =
            'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat restoredraft fullscreen preview history save saveVersion'
        } else {
          this.toolbar = 'fullscreen preview'
        }
      }
    },
    destroyed() {
      this.$store.commit('index/set_selectedFile', { suffix: '' })
    },
    created() {
      screenfull.on('change', () => {
        this.isFullscreen = screenfull.isFullscreen
        console.log(this.isFullscreen)

        const cont = document.querySelector('#cont')

        if (this.isFullscreen) {
          cont.classList.add('Fullscreen')
        } else {
          cont.classList.remove('Fullscreen')
          this.$emit('closeCallback')
        }
      })

      // document.querySelector('pdf')

      // $('#iframe').contents().find('#copyrightTxt').css('hight', '10px')
    },
    methods: {
      /**
       * 全屏事件
       */
      screenfull() {
        console.log(screenfull.isFullscreen)
        // if (!screenfull.enabled) {
        //   this.$message({
        //     message: 'Your browser does not support!',
        //     type: 'warning'
        //   })
        //   return false
        // }
        const preview = document.querySelector('#cont')
        screenfull.toggle(preview)
        // screenfull.toggle(document.querySelector("#isFullscreen"));
      },
      //鼠标单击的事件
      onClick(e, editor) {
        // console.log(e.target.src)
        if (e.target.nodeName === 'IMG') {
          this.imgUrl = e.target.src
          this.isShowBigImg = true
        }
      },
      onWheelImage(event) {
        let delta = 0
        if (event.wheelDelta) {
          delta = event.wheelDelta / 120
          if (window.opera) delta = -delta
        } else if (event.detail) {
          delta = -event.detail / 3
        }
        var img = event.target
        if (delta > 0) {
          let width = img.width
          img.width = width * 1.1
        } else if (delta < 0) {
          let width = img.width
          if (width > 400) {
            img.width = width * 0.9
          }
        }
      },
      onEdit() {
        this.$parent.exportHtml(this.selectedFile.id)
      },
    }
  }
</script>
<style>
  /*查看大图*/
  .dialog-show-img {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    overflow: auto;
  }

  .dialog-show-img .img-layout {
    position: absolute;
    /*top: 50%;*/
    left: 50%;
    transform: translateX(-50%);
  }

  .dialog-show-img .img {

  }

</style>
<style lang="scss" scoped>
  #cont {
    flex: 1;
    background-color: #fff;

    & > img {
      max-width: 100%;
      max-height: 100%;
      flex: auto; /*自适应填充方式*/
    }
  }
</style>
<style lang="scss" >
#cont {
  &.Fullscreen {
    .tox-editor-header,
    .tox-statusbar {
      display: none;
    }
    .tox-sidebar-wrap {
      padding: 0 10%;
      background-color: #eaeaea;
    }
    .tox-edit-area {
      background-color: #fff;
    }
  }
  .pdf-box {
    width: 100%;
    height: 100%;
    position: relative;
    .edit {
      width: 33px;
      height: 33px;
      background: #ebedef;
      border-radius: 50%;
      position: absolute;
      right: 50px;
      bottom: 214px;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      cursor: pointer;
      img {
        width: 13px;
      }
    }
    &:hover .edit {
      opacity: 1;
    }
  }
}
</style>
